<template>
  <cost-consum-page
    type="energyCost"
    :queryFormItem="queryFormItems"
    :collapseFormItem="collapseFormItems"
    :loading="loading"
    @queryPush="queryPush"
    @workShopName="workShopName"
    @planName="planName"
  />
</template>

<script>
import costConsumPage from '../components/costConsumPage.vue'
import mixin from "@/pages/components/mixins/mixin";

export default {
  components: { costConsumPage },
  mixins: [mixin],
  computed: {
    mediumOptions() {
      return [
        {
          key: "scale",
          title: {
            "zh-CN": "粒度",
            "en-US": "scale",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.scaleOptions },
        },
        {
          key: "timeRange",
          title: {
            "zh-CN": "时间区间",
            "en-US": "timeRange",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "datetimeRange" },
        }
      ]
    },
    workshopIdOptions() {
      return [
        {
          key: "workshop",
          title: {
            "zh-CN": "车间",
            "en-US": "workshop",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.workOptions },
        },
        {
          key: "equipment",
          title: {
            "zh-CN": "设备",
            "en-US": "equipment",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.equipOptions },
        },
        {
          key: "timeRange",
          title: {
            "zh-CN": "时间区间",
            "en-US": "timeRange",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "datetimeRange" },
        }
      ]
    },
    productOptions() {
      return [
        {
          key: "planNo",
          title: {
            "zh-CN": "计划",
            "en-US": "planNo",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", filterable: true, options: this.planOptions },
        },
        {
          key: "noticeNo",
          title: {
            "zh-CN": "通知单",
            "en-US": "noticeNo",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", filterable: true, options: this.noticeOptions },
        },
        {
          key: "scale",
          title: {
            "zh-CN": "粒度",
            "en-US": "scale",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.scaleOptions },
        },
      ]
    },
    queryFormItem() {
      return [
        {
          key: "searchType",
          title: {
            "zh-CN": "查找类型",
            "en-US": "searchType",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.searchOptions },
        }
      ];
    },
    collapseFormItem() {
      return [
        {
          key: "searchType",
          title: {
            "zh-CN": "查找类型",
            "en-US": "searchType",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.searchOptions },
        }
      ];
    }
  },
  data() {
    return {
      queryFormItems: [],
      collapseFormItems: [],
      equipOptions: [],
      planOptions: [],
      noticeOptions:[],
      scaleOptions: [
        { label: "分", value: "分" },
        { label: "时", value: "时" },
        { label: "天", value: "天" },
        { label: "月", value: "月" },
        { label: "年", value: "年" },
      ],
      searchOptions: [
        { label: "按介质查找", value: "medium" },
        { label: "按车间查找", value: "workShop" },
        { label: "按产品查找", value: "product" },
      ],
      workOptions: [
        { label: '中粗粉车间', value: '中粗粉车间' },
        { label: '超细粉车间', value: '超细粉车间' },
        { label: '气体站', value: '气体站' }
      ],
      planClassObject: null,
      loading: false,
    }
  },
  created() {
    this.queryFormItems = this.queryFormItem
    this.collapseFormItems = this.collapseFormItem
  },
  methods: {
    queryPush(flag) {
      this.queryFormItems = structuredClone(this.queryFormItem)
      this.collapseFormItems = structuredClone(this.collapseFormItem)
      if(flag === 'medium') {
        this.queryFormItems.push(...this.mediumOptions)
        this.collapseFormItems.push(...this.mediumOptions)
      }
      if(flag === 'workShop') {
        this.queryFormItems.push(...this.workshopIdOptions)
        this.collapseFormItems.push(...this.workshopIdOptions)
      }
      if(flag === 'product') {
        if(this.planOptions.length) {
          this.queryFormItems.push(...this.productOptions)
          this.collapseFormItems.push(...this.productOptions)
        } else {
          this.loading = true
          let condition = "className == 'MasterPlan' && type == 'templateDictionary'"
          this.planClassObject = this.$modelObject.create(`templateCollection`);
          this.planClassObject.query(condition).then(res => {
            let arr = this.planClassObject.records.map(item => {
              return {
                label: item.values.sf_planBatchNo,
                value: item.values.sf_planBatchNo,
              }
            })
            this.planOptions = arr
            this.queryFormItems.push(...this.productOptions)
            this.collapseFormItems.push(...this.productOptions)
            this.loading = false
          })
        }
      }
    },
    workShopName(val) {
      // 拿到车间名
      let obj = { workshop: val }
      this.$api.Custom.getEquipByWorkShop(obj).then((res) => {
        if (!res) {
          return;
        }
        let arr = res.map(item => {
          return {
            label: item.values.sf_name,
            value: item.id
          }
        })
        this.equipOptions = arr
        this.queryPush('workShop')
      });
    },
    planName(val) {
      // 拿到计划名
      let obj = { planNo: val }
      this.$api.Custom.getNoticeByPlan(obj).then((res) => {
        if (!res) {
          return;
        }
        let arr = res.map(item => {
          return {
            label: item,
            value: item
          }
        })
        this.noticeOptions = arr
        this.queryPush('product')
      });
    },
  }
}
</script>

<style scoped lang="scss">

</style>
